<template>
  <div id="showImg">
    <div class="top-img-box" :class="size <= 1 ? 'fullTop' : ''">
      <el-image
        v-if="size"
        fit="contain"
        :src="curSrc"
        :preview-src-list="showBigList"
      >
      </el-image>
    </div>
    <div v-if="size > 1" class="bottom-img-box">
      <a href="javascript:;" class="prev" @click="changeList(1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="next" @click="changeList(-1)">
        <i class="el-icon-arrow-right"></i>
      </a>
      <div class="wrap">
        <ul>
          <li v-for="(item, index) in showList" :key="index">
            <img :src="item" alt="" @click="changeCurSrc(item, index)" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'showImg',
  msg: '查看图片-公共组件',
  props: ['imgList'], // imgList-全部图片
  data() {
    return {
      curSrc: '', // 当前展示的大图地址
      showList: [], // 小图列表展示的内容
      curIndex: 0, // 小图列表第一个图片的index
      step: 4, // 跨度
      size: 0,
      showBigList: []
    }
  },
  mounted() {
    /* console.log(this.imgList) */
    this.size = this.imgList.length
    if (this.size) {
      this.curSrc = this.imgList[0]
    }
    if (this.size > 1) {
      let s = this.curIndex
      let e = this.curIndex + this.step
      this.showList = this.imgList.slice(s, e)
      /* console.log(this.showList.length)
         console.log(this.showList) */
    }
    this.showBigList = [...this.imgList]
  },
  methods: {
    /* 改变当前大图的src,和大图播放列表的数组顺序 */
    changeCurSrc(src, index) {
      this.curSrc = src
      let i = this.curIndex + index
      let startAry = this.imgList.slice(i)
      let endAry = this.imgList.slice(0, i)
      this.showBigList = startAry.concat(endAry)
    },
    /* 小图换页 */
    changeList(dir) {
      if (dir === 1) {
        // 1-向前翻页，-1-向后翻页
        if (this.curIndex === 0) {
          this.$message.warning('已经是第一条数据！')
          return
        }
        this.curIndex -= this.step
      } else {
        if (this.curIndex + this.step >= this.imgList.length) {
          this.$message.warning('已经是最后一条数据！')
          return
        }
        this.curIndex += this.step
      }
      let s = this.curIndex
      let e = this.curIndex + this.step
      this.showList = this.imgList.slice(s, e)
    }
  }
}
</script>

<style lang="less">
#showImg {
  width: 100%;
  height: 100%;

  img {
    cursor: pointer;
  }

  .top-img-box {
    height: 65%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eee;

    &.fullTop {
      height: 100%;
    }

    .el-image {
      width: 100%;
      height: 100%;
    }

    img {
      max-width: 100%;
      max-height: 100%;
    }
  }

  .bottom-img-box {
    box-sizing: border-box;
    height: 35%;
    padding-top: 8px;
    position: relative;

    .prev,
    .next {
      position: absolute;
      display: inline-block;
      width: 10px;
      height: 30px;
      background: #eee;
      text-align: center;
      line-height: 30px;
      top: 50%;
      margin-top: -15px;
      z-index: 999;
      font-size: 14px;
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
    }

    .wrap {
      overflow: hidden;
      position: relative;
      height: 100%;

      ul {
        position: absolute;
        left: 18px;
        top: 0;
        width: calc(~'100% - 24px');
        height: 100%;

        li {
          float: left;
          display: flex;
          justify-content: center;
          align-items: center;
          width: calc(~'25% - 10px');
          height: 100%;
          margin-right: 10px;
          border: 1px solid #ccc;
          box-sizing: border-box;

          img {
            max-width: 100%;
            max-height: 100%;
          }
        }
      }
    }
  }
}
</style>
